<style>
    /* 图片详情弹窗样式 */
.image-detail-container {
    padding: 20px;
    max-width: 600px;
}

/* 图片列表样式 */
.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

/* 单张图片容器样式 */
.image-item {
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f8f8f8;
}

/* 图片样式 */
.image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s;
}

.image-preview:hover {
    transform: scale(1.05);
}

/* 图片操作按钮 */
.image-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-item:hover .image-actions {
    opacity: 1;
}

.image-action-btn {
    flex: 1;
    color: white;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    font-size: 12px;
}

.image-action-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 图片上传部分样式 */
.image-upload-section {
    text-align: center;
    padding: 10px 0;
}

/* 图片上传弹窗样式 */
.image-upload-container {
    padding: 20px;
    max-width: 400px;
}

/* 更新图片描述弹窗样式 */
.image-update-container {
    padding: 20px;
    max-width: 400px;
}

/* 无图片提示样式 */
.no-images {
    text-align: center;
    padding: 40px 0;
    color: #999;
}

/* 图片描述显示 */
.image-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 大图片预览样式 */
.layui-layer-photos {}

/* 文件上传按钮样式 */
input[type="file"] {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
</style>
